<template>
  <g-layout :isShowLeftSider="false">
    <template #content>
      <div class="group-container">
        <div class="group">
          <a-button
            :disabled="loading"
            :type="'primary'"
            @click="handleSubmit"
            style="border-radius: 4px"
          >
            <save-outlined />
            {{ l('SaveAll') }}
          </a-button>
        </div>
      </div>
      <a-spin :spinning="loading" wrapperClassName="spinning-container">
        <!-- <page-header :title="l('Settings')"></page-header> -->
        <a-card :bordered="false">
          <a-tabs v-if="tenantSettings">
            <!-- 基本信息 -->
            <a-tab-pane :tab="l('General')" key="1" v-if="showTimezoneSelection">
              <a-form :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
                <a-form-item :label="l('Timezone')">
                  <timezone-combo
                    :selectedTimeZone="tenantSettings.general.timezone"
                    :defaultTimezoneScope="defaultTimezoneScope"
                    @selectedTimeZoneChange="selectedTimeZoneChange"
                  ></timezone-combo>
                </a-form-item>
              </a-form>
            </a-tab-pane>
            <!-- 用户管理 -->
            <a-tab-pane :tab="l('UserManagement')" key="3" v-if="tenantSettings.userManagement">
              <h3>{{ l('FormBasedRegistration') }}</h3>
              <!-- 允许用户注册 -->
              <a-checkbox v-model:checked="tenantSettings.userManagement.allowSelfRegistrationUser">
                {{ l('AllowUsersToRegisterThemselves') }}
              </a-checkbox>
              <p class="text-grey-dark">{{ l('AllowUsersToRegisterThemselves_Hint') }}</p>
              <br />
              <!-- 注册用户默认激活 -->
              <a-checkbox
                v-model:checked="tenantSettings.userManagement.isNewRegisteredUserActiveByDefault"
                >{{ l('NewRegisteredUsersIsActiveByDefault') }}</a-checkbox
              >
              <p class="text-grey-dark">{{ l('NewRegisteredUsersIsActiveByDefault_Hint') }}</p>
              <br />
              <!-- 必须验证邮箱地址后才能登录 -->
              <a-checkbox
                v-model:checked="tenantSettings.userManagement.isEmailConfirmationRequiredForLogin"
                >{{ l('EmailConfirmationRequiredForLogin') }}</a-checkbox
              >
              <a-divider />
              <!-- 配置验证码 -->
              <h3>{{ l('ConfigCaptchaRules') }}</h3>
              <!--用户登录使用验证码-->
              <a-checkbox
                v-model:checked="tenantSettings.userManagement.captchaConfig.useCaptchaOnUserLogin"
              >
                {{ l('UseCaptchaOnUserLogin') }}
              </a-checkbox>
              <p></p>
              <!--忘记密码使用验证码-->
              <a-checkbox
                v-model:checked="
                  tenantSettings.userManagement.captchaConfig.useCaptchaOnUserForgotPassword
                "
                >{{ l('UseCaptchaOnUserForgotPassword') }}</a-checkbox
              >
              <p></p>
              <!-- 用户注册使用验证码-->
              <a-checkbox
                v-model:checked="
                  tenantSettings.userManagement.captchaConfig.useCaptchaOnUserRegistration
                "
              >
                {{ l('UseCaptchaOnUserRegistration') }}
              </a-checkbox>
              <p></p>
              <!-- 宿主用户登陆图片验证码类型   -->
              <div
                v-if="
                  tenantSettings.userManagement.captchaConfig.useCaptchaOnUserLogin ||
                  tenantSettings.userManagement.captchaConfig.useCaptchaOnUserRegistration ||
                  tenantSettings.userManagement.captchaConfig.useCaptchaOnUserForgotPassword
                "
              >
                <a-divider />
                <!--验证码类型-->
                <p><label class="requiredlabel">*</label>{{ l('ConfigCaptchaType') }}:</p>
                <a-select
                  style="width: 100%"
                  v-model:value="
                    tenantSettings.userManagement.captchaConfig.configCaptchaOnUserType
                  "
                  @change="useCaptchaOnUserLoginHandleChange"
                  :placeholder="l('CaptchaOnHostUserLoginType')"
                >
                  <a-select-option value="Number">纯数字</a-select-option>
                  <a-select-option value="English">纯字母</a-select-option>
                  <a-select-option value="NumberAndLetter">数值与字母的组合</a-select-option>
                </a-select>
              </div>
              <p>
                <br />
              </p>
              <!-- 验证码长度 -->
              <div
                v-if="
                  tenantSettings.userManagement.captchaConfig.useCaptchaOnUserLogin ||
                  tenantSettings.userManagement.captchaConfig.useCaptchaOnUserRegistration ||
                  tenantSettings.userManagement.captchaConfig.useCaptchaOnUserForgotPassword
                "
              >
                <p><label class="requiredlabel">*</label>{{ l('ConfigCaptchaLength') }}:</p>
                <a-input-number
                  id="inputNumber"
                  :min="4"
                  :max="10"
                  :step="1"
                  v-model:value="
                    tenantSettings.userManagement.captchaConfig.configCaptchaOnUserLength
                  "
                />
              </div>
            </a-tab-pane>
            <!-- 安全 -->
            <a-tab-pane :tab="l('Security')" key="4" v-if="tenantSettings.security">
              <!--是否强制修改密码-->
              <h3>{{ l('WhetherToForceAPasswordChange') }}</h3>
              <a-row>
                <a-switch
                  v-model:checked="tenantSettings.security.updatePasswordForceEditDto.switchStatus"
                  name="updatePasswdForceInput"
                >
                </a-switch>
              </a-row>
              <p></p>
              <!-- 有效时长 -->
              <a-row
                style="line-height: 30px"
                v-if="tenantSettings.security.updatePasswordForceEditDto.switchStatus"
              >
                <label class="requiredlabel">*</label>{{ l('ValidDuration') }}&nbsp;&nbsp;
                <a-input-number
                  name="effectiveTime"
                  v-model:value="
                    tenantSettings.security.updatePasswordForceEditDto.effectiveTimeLast
                  "
                  :min="1"
                  :step="1"
                  precision="cut"
                >
                </a-input-number>
                <!-- 单位 -->
                {{ l('Unit') }}
                <g-enum
                  :type="select"
                  :value="tenantSettings.security.updatePasswordForceEditDto.timeUnitEnum"
                  :optionMenu="'TimeUnitEnum'"
                  :placeholder="l('Unit')"
                  @valueChange="updatePasswordForceChange($event)"
                ></g-enum>
              </a-row>
              <a-divider />
              <!-- 演示模式 -->
              <h3>{{ l('DemoMode') }}</h3>
              <a-row>
                <a-checkbox
                  disabled="ture"
                  v-model:checked="tenantSettings.security.previewMode"
                  name="Setting_Security_PreviewMode"
                >
                  {{ l('EnablePresentationMode') }}
                </a-checkbox>
              </a-row>
              <a-divider />
              <!-- 密码复杂性 -->
              <h3>{{ l('PasswordComplexity') }}</h3>
              <!-- 使用默认设置 -->
              <a-checkbox
                v-model:checked="tenantSettings.security.useDefaultPasswordComplexitySettings"
              >
                {{ l('UseDefaultSettings') }}
              </a-checkbox>
              <br />
              <!-- 缺少数字 -->
              <a-checkbox
                v-model:checked="tenantSettings.security.passwordComplexity.requireDigit"
                :disabled="tenantSettings.security.useDefaultPasswordComplexitySettings"
              >
                {{ l('PasswordComplexity_RequireDigit') }}
              </a-checkbox>
              <br />
              <!-- 缺少小写字母 -->
              <a-checkbox
                v-model:checked="tenantSettings.security.passwordComplexity.requireLowercase"
                :disabled="tenantSettings.security.useDefaultPasswordComplexitySettings"
              >
                {{ l('PasswordComplexity_RequireLowercase') }}
              </a-checkbox>
              <br />
              <!-- 缺少特殊字符 -->
              <a-checkbox
                v-model:checked="tenantSettings.security.passwordComplexity.requireNonAlphanumeric"
                :disabled="tenantSettings.security.useDefaultPasswordComplexitySettings"
              >
                {{ l('PasswordComplexity_RequireNonAlphanumeric') }}
              </a-checkbox>
              <br />
              <!-- 缺少大写字母 -->
              <a-checkbox
                v-model:checked="tenantSettings.security.passwordComplexity.requireUppercase"
                :disabled="tenantSettings.security.useDefaultPasswordComplexitySettings"
              >
                {{ l('PasswordComplexity_RequireUppercase') }}
              </a-checkbox>
              <br />
              <br />
              <p>
                <label
                  v-if="!tenantSettings.security.useDefaultPasswordComplexitySettings"
                  class="requiredlabel"
                >
                  *
                </label>
                {{ l('PasswordComplexity_RequiredLength') }}:
              </p>
              <a-input-number
                id="inputNumber"
                :step="1"
                :min="6"
                v-if="!tenantSettings.security.useDefaultPasswordComplexitySettings"
                v-model:value="tenantSettings.security.passwordComplexity.requiredLength"
              />
              <a-input-number
                id="inputNumber"
                :step="1"
                :min="6"
                disabled
                v-if="tenantSettings.security.useDefaultPasswordComplexitySettings"
                v-model:value="tenantSettings.security.defaultPasswordComplexity.requiredLength"
              />
              <a-divider />
              <!-- 锁定用户 -->
              <h3>{{ l('UserLockOut') }}</h3>
              <!-- 登录失败后启用用户的帐户锁定 -->
              <a-checkbox v-model:checked="tenantSettings.security.userLockOut.isEnabled">
                {{ l('EnableUserAccountLockingOnFailedLoginAttemts') }}
              </a-checkbox>
              <p></p>
              <!-- 在锁定帐户之前的累计登录失败的最大数量: -->
              <p v-if="tenantSettings.security.userLockOut.isEnabled">
                <label class="requiredlabel">*</label>
                {{ l('MaxFailedAccessAttemptsBeforeLockout') }}:
              </p>
              <a-input-number
                v-if="tenantSettings.security.userLockOut.isEnabled"
                id="inputNumber"
                :step="1"
                :min="5"
                v-model:value="
                  tenantSettings.security.userLockOut.maxFailedAccessAttemptsBeforeLockout
                "
              />
              <!-- 帐户锁定持续时间 -->
              <p v-if="tenantSettings.security.userLockOut.isEnabled"></p>
              <p v-if="tenantSettings.security.userLockOut.isEnabled">
                <label class="requiredlabel">*</label>
                {{ l('DefaultAccountLockoutDurationAsSeconds') }}:
              </p>
              <a-input-number
                v-if="tenantSettings.security.userLockOut.isEnabled"
                id="inputNumber"
                :step="1"
                :min="60"
                v-model:value="tenantSettings.security.userLockOut.defaultAccountLockoutSeconds"
              />
              <!-- 两步认证登录 -->
              <p></p>
              <h3 v-if="tenantSettings.security.twoFactorLogin.isEnabled">{{
                l('TwoFactorLogin')
              }}</h3>
              <a-checkbox
                v-model:checked="tenantSettings.security.twoFactorLogin.isEnabled"
                v-if="tenantSettings.security.twoFactorLogin.isEnabled"
              >
                {{ l('EnableTwoFactorLogin') }}
              </a-checkbox>
              <p></p>
              <a-checkbox
                v-model:checked="tenantSettings.security.twoFactorLogin.isEmailProviderEnabled"
                v-if="tenantSettings.security.twoFactorLogin.isEnabled"
              >
                {{ l('IsEmailVerificationEnabled') }}
              </a-checkbox>
              <p></p>
              <a-checkbox
                v-model:checked="tenantSettings.security.twoFactorLogin.isSmsProviderEnabled"
                v-if="tenantSettings.security.twoFactorLogin.isEnabled"
              >
                {{ l('IsSmsVerificationEnabled') }}
              </a-checkbox>
              <p></p>
              <a-checkbox
                v-model:checked="
                  tenantSettings.security.twoFactorLogin.isGoogleAuthenticatorEnabled
                "
                v-if="tenantSettings.security.twoFactorLogin.isEnabled"
              >
                {{ l('IsGoogleAuthenticatorEnabled') }}
              </a-checkbox>
              <p></p>
              <a-checkbox
                v-model:checked="tenantSettings.security.twoFactorLogin.isRememberBrowserEnabled"
                v-if="tenantSettings.security.twoFactorLogin.isEnabled"
              >
                {{ l('AllowToRememberBrowserForTwoFactorLogin') }}
              </a-checkbox>
            </a-tab-pane>
            <!-- 邮箱 -->
            <a-tab-pane
              :tab="l('EmailSmtp')"
              key="5"
              v-if="tenantSettings.userManagement"
              forceRender="true"
            >
              <a-form :model="form" ref="formRef" :rules="rules" :layout="'vertical'">
                <!-- 默认发送邮箱地址 -->
                <a-form-item
                  has-feedback
                  :label="l('DefaultFromAddress')"
                  name="defaultFromAddress"
                >
                  <a-input v-model:value="form.defaultFromAddress" />
                </a-form-item>
                <!-- 默认发送人名字 -->
                <a-form-item
                  has-feedback
                  :label="l('DefaultFromDisplayName')"
                  name="defaultFromDisplayName"
                >
                  <a-input v-model:value="form.defaultFromDisplayName" />
                </a-form-item>
                <!-- SMTP服务器 -->
                <a-form-item :label="l('SmtpHost')" name="smtpHost" has-feedback>
                  <a-input v-model:value="form.smtpHost" />
                </a-form-item>
                <!-- SMTP端口 -->
                <a-form-item :label="l('SmtpPort')" name="smtpPort" has-feedback>
                  <a-input v-model:value="form.smtpPort" />
                </a-form-item>
                <!-- 使用SSL -->
                <a-form-item>
                  <a-checkbox v-model:checked="form.smtpEnableSsl">{{ l('UseSsl') }}</a-checkbox>
                </a-form-item>
                <!-- 默认身份验证 -->
                <a-form-item>
                  <a-checkbox v-model:checked="form.smtpUseDefaultCredentials">
                    {{ l('UseDefaultCredentials') }}
                  </a-checkbox>
                </a-form-item>
                <!-- 域名 -->
                <a-form-item
                  :label="l('DomainName')"
                  v-if="!form.smtpUseDefaultCredentials"
                  name="smtpDomain"
                  has-feedback
                >
                  <a-input v-model:value="form.smtpDomain" />
                </a-form-item>
                <!-- 用户名 -->
                <a-form-item
                  :label="l('UserName')"
                  v-if="!form.smtpUseDefaultCredentials"
                  name="smtpUserName"
                  has-feedback
                >
                  <a-input v-model:value="form.smtpUserName" />
                </a-form-item>
                <!-- 密码 -->
                <a-form-item
                  :label="l('Password')"
                  v-if="!form.smtpUseDefaultCredentials"
                  name="smtpPassword"
                  has-feedback
                >
                  <a-input type="password" v-model:value="form.smtpPassword" />
                </a-form-item>
                <!-- 测试邮件设置 -->
                <a-form-item
                  :label="l('TestEmailSettingsHeader')"
                  name="testEmailSettingsHeader"
                  has-feedback
                >
                  <a-input
                    :placeholder="l('TestEmailSettingsHeader')"
                    v-model:value="form.testEmailSettingsHeader"
                  >
                  </a-input>
                </a-form-item>
                <!-- 发送测试邮件 -->
                <a-form-item>
                  <a-button type="primary" @click="sendTestEmail">{{
                    l('SendTestEmail')
                  }}</a-button>
                </a-form-item>
              </a-form>
            </a-tab-pane>
            <!--设置系统地址-->
            <a-tab-pane
              :tab="l('Settings.Urls')"
              key="7"
              v-if="tenantSettings.urls"
              forceRender="true"
            >
              <a-form :model="tenantSettings.urls" :rules="rules" :layout="'vertical'">
                <!-- 管理端API访问地址 -->
                <a-form-item :label="l('AdminApiUrl')" name="AdminApiUrl" has-feedback>
                  <a-input
                    v-model:value="tenantSettings.urls.adminApiUrl"
                    required
                    minlength="6"
                    maxlength="32"
                  />
                </a-form-item>
                <!-- 管理端UI访问地址 -->
                <a-form-item :label="l('adminUiUrl')" name="adminUiUrl" has-feedback>
                  <a-input
                    v-model:value="tenantSettings.urls.adminUiUrl"
                    required
                    minlength="6"
                    maxlength="512"
                  />
                </a-form-item>
                <!-- 用户中心 访问地址 -->
                <a-form-item :label="l('userCenterUrl')" name="userCenterUrl" has-feedback>
                  <a-input
                    v-model:value="tenantSettings.urls.userCenterUrl"
                    required
                    minlength="6"
                    maxlength="512"
                  />
                </a-form-item>
                <!-- 门户端访问地址 -->
                <a-form-item :label="l('protalUrl')" name="protalUrl" has-feedback>
                  <a-input
                    v-model:value="tenantSettings.urls.protalUrl"
                    required
                    minlength="6"
                    maxlength="512"
                  />
                </a-form-item>
              </a-form>
            </a-tab-pane>
          </a-tabs>
        </a-card>
      </a-spin>
    </template>
  </g-layout>
</template>

<script lang="ts">
  import { AppComponentBase } from '/@/shared/component-base';
  import {
    CommonLookupServiceProxy,
    TenantSettingsServiceProxy,
    SendTestEmailInput,
    TenantSettingsEditDto,
    ValidateCodeType,
    TimeUnitEnum,
    CaptchaConfigSetting,
  } from '/@/shared/service-proxies';
  import { defineComponent } from 'vue';
  import { TimezoneCombo } from '/@/app/admin-shared';
  import { SaveOutlined } from '@ant-design/icons-vue';
  import { AppPreBootstrap } from '/@/AppPreBootstrap';
  export default defineComponent({
    mixins: [AppComponentBase],
    name: 'tenant-settings',
    components: {
      TimezoneCombo,
      SaveOutlined,
    },
    data() {
      return {
        tenantSettings: new TenantSettingsEditDto(),
        rules: {
          defaultFromAddress: [
            {
              required: true,
              message: this.l('ThisFieldIsRequired'),
            },
            {
              pattern: '^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$',
              message: this.l('NotEmail'),
              trigger: 'blur',
            },
            {
              max: 128,
              message: this.l('MaxLength', 128),
            },
          ],
          defaultFromDisplayName: [
            {
              required: true,
              message: this.l('ThisFieldIsRequired'),
              trigger: 'blur',
            },
            {
              max: 64,
              message: this.l('MaxLength', 64),
            },
          ],
          smtpHost: [
            {
              required: true,
              message: this.l('ThisFieldIsRequired'),
              trigger: 'blur',
            },
            {
              max: 128,
              message: this.l('MaxLength', 128),
            },
          ],
          smtpPort: [
            {
              required: true,
              message: this.l('ThisFieldIsRequired'),
              trigger: 'blur',
            },
            {
              max: 64,
              message: this.l('MaxLength', 64),
            },
          ],
          smtpUserName: [
            {
              required: true,
              message: this.l('ThisFieldIsRequired'),
              trigger: 'blur',
            },
            {
              max: 128,
              message: this.l('MaxLength', 128),
            },
          ],
          smtpDomain: [
            {
              required: true,
              message: this.l('ThisFieldIsRequired'),
              trigger: 'blur',
            },
            {
              max: 128,
              message: this.l('MaxLength', 128),
            },
          ],
          testEmailSettingsHeader: [
            {
              required: true,
              message: this.l('ThisFieldIsRequired'),
              trigger: 'blur',
            },
            {
              max: 128,
              message: this.l('MaxLength', 128),
            },
          ],
          smtpPassword: [
            {
              required: true,
              message: this.l('ThisFieldIsRequired'),
              trigger: 'blur',
            },
            {
              max: 128,
              message: this.l('MaxLength', 128),
            },
          ],
          adminUiUrl: [
            {
              required: true,
              message: this.l('ThisFieldIsRequired'),
              trigger: 'blur',
            },
            {
              max: 512,
              message: this.l('MaxLength', 512),
            },
            {
              min: 6,
              message: this.l('MinLength', 6),
            },
          ],
        },
        form: {
          defaultFromAddress: '',
          defaultFromDisplayName: '',
          smtpHost: '',
          smtpPort: '',
          smtpDomain: '',
          smtpUserName: '',
          smtpPassword: '',
          testEmailSettingsHeader: '',
          smtpEnableSsl: false,
          smtpUseDefaultCredentials: true,
        },
        // 选择时区
        showTimezoneSelection: abp.clock.provider.supportsMultipleTimezone,
        defaultTimezoneScope: 'Application',

        commonLookupServiceProxy: new CommonLookupServiceProxy(),
        tenantSettingsServiceProxy: new TenantSettingsServiceProxy(),
        setEmailInput: new SendTestEmailInput(),
        // 版本list
        versionList: [],
        // 图片验证码类型
        imgCodeTypeList: [],
        usingDefaultTimeZone: '',
      };
    },
    mounted() {
      this.loading = true;
      this.getimgCodeTypeList();
      this.getAllSetting();
      Promise.all([this.getData, this.getimgCodeTypeList, this.getAllSetting])
        .finally(() => {
          this.loading = false;
        })
        .then(() => {});
    },
    created() {
      this.tenantSettings.userManagement.captchaConfig = new CaptchaConfigSetting();
    },
    methods: {
      /**
       * 获取数据
       */
      getData() {
        this.commonLookupServiceProxy.getEditionsForCombobox(false).then((res) => {
          this.versionList = res.items as any;
        });
      },
      /**
       * 获取图片验证嘛类型
       */
      getimgCodeTypeList() {
        this.commonLookupServiceProxy.getValidateCodeTypesForCombobox().then((res) => {
          (this.imgCodeTypeList as any) = res.items;
        });
      },
      /**
       * 获取所有设置
       */
      getAllSetting() {
        this.tenantSettingsServiceProxy
          .getAllSettings()

          .then((res) => {
            (this.tenantSettings as any) = res;
            this.$nextTick(() => {
              this.form.defaultFromAddress = String(res.email.defaultFromAddress);
              this.form.defaultFromDisplayName = String(res.email.defaultFromDisplayName);
              this.form.smtpHost = String(res.email.smtpHost);
              this.form.smtpPort = String(res.email.smtpPort);
              this.form.smtpEnableSsl = res.email.smtpEnableSsl;
              this.form.smtpUseDefaultCredentials = res.email.smtpUseDefaultCredentials;
              this.form.smtpDomain = String(res.email.smtpDomain);
              this.form.smtpUserName = String(res.email.smtpUserName);
              this.form.smtpPassword = String(res.email.smtpPassword);
              this.form.testEmailSettingsHeader = String(res.email.defaultFromAddress);
            });
          });
      },
      /**
       * 选择时区
       */
      selectedTimeZoneChange(data: string) {
        this.tenantSettings.general.timezone = data;
      },
      /**
       * 宿主用户登陆图片验证码类型
       */
      useCaptchaOnUserLoginHandleChange(value: ValidateCodeType) {
        this.tenantSettings.userManagement.captchaConfig.configCaptchaOnUserType = value;
      },
      /**
       * 强制修改密码时间单位选择
       */
      updatePasswordForceChange(value: TimeUnitEnum) {
        this.tenantSettings.security.updatePasswordForceEditDto.timeUnitEnum = value;
      },
      /**
       * 保存全部
       */
      handleSubmit(e) {
        (this.$refs.formRef as any).validate().then(() => {
          e.preventDefault();
          if (
            this.tenantSettings.userManagement.captchaConfig.configCaptchaOnUserLength == null ||
            (this.tenantSettings.security.updatePasswordForceEditDto.switchStatus == true &&
              this.tenantSettings.security.updatePasswordForceEditDto.effectiveTimeLast == null) ||
            this.tenantSettings.security.passwordComplexity.requiredLength == null ||
            this.tenantSettings.security.defaultPasswordComplexity.requiredLength == null ||
            this.tenantSettings.security.userLockOut.maxFailedAccessAttemptsBeforeLockout == null ||
            this.tenantSettings.security.userLockOut.defaultAccountLockoutSeconds == null
          ) {
            this.notify.warn(this.l('Thelengthrangecannotbeempty'));
            return;
          }
          Object.assign(this.tenantSettings.email, this.form);
          this.loading = true;
          this.tenantSettingsServiceProxy
            .updateAllSettings(this.tenantSettings)
            .finally(() => {
              this.loading = false;
            })
            .then(() => {
              this.notify.success(this.l('SavedSuccessfully'));
              this.getAllSetting();
              AppPreBootstrap.getUserConfiguration(() => {});
            });
        });
      },
      /**
       * 发送测试邮箱
       */
      sendTestEmail() {
        this.loading = true;
        this.setEmailInput.emailAddress = this.form.testEmailSettingsHeader;
        this.tenantSettingsServiceProxy
          .sendTestEmail(this.setEmailInput)
          .finally(() => {
            this.loading = false;
          })
          .then(() => {
            this.notify.success(this.l('TestEmailSentSuccessfully'));
          });
      },
    },
  });
</script>

<style scoped lang="less">
  .group-container {
    display: flex;
    align-content: center;
    align-items: center;
    background: #f2f5f7;
    padding-bottom: 20px;
    .group {
      width: 100%;
      height: 100%;
      padding: 16px;
      background: #fff;
    }
  }
  :deep(.ant-card-body) {
    padding: 0 24px;
  }
  :deep(.requiredlabel) {
    display: inline-block;
    margin-right: 4px;
    color: #ff4d4f;
    font-size: 14px;
    font-family: SimSun, sans-serif;
    line-height: 1;
    content: '*';
  }
  :deep(.ant-form-item-label) {
    text-align: left;
  }
  :deep(.ant-input-group-addon) {
    padding: 0 !important;
  }
  :deep(.ant-input) {
    height: 35px;
  }
  .text-grey-dark {
    color: #ccc;
    font-size: 13px;
    text-indent: 2em;
  }
  h3 {
    font-size: 15px;
    margin-bottom: 20px;
  }
</style>
